<template>
  <div class="fuwenben">
    <div class="ql_show">
      <quill-editor
        ref="text"
        v-model="content"
        class="myQuillEditor"
        :options="editorOption"
      />
    </div>
    
    <input
      type="file"
      hidden
      accept=".jpg,.png"
      ref="fileBtn"
      @change="handleChange"
    />
    <!-- <div class="ql-editor ql_show ql_show_box" @click="tishiWenben">
      <div class="cc_tishi">效果预览</div>
      <div v-html="content"></div>
    </div> -->
    
  </div>
</template>

<script>
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import axios from 'axios'
export default {
  components: {
    quillEditor,
  },
  props:{
    rfuwenben: {
      type: String
    },
  },
  mounted(){
    if (this.$refs.text) {
      //myQuillEditor改成自己的
      this.$refs.text.quill
        .getModule("toolbar")
        .addHandler("image", this.imgHandler);
      //这里初始化，劫持toolbar的image的handler方法，在mounted中处理
    }
    this.http = this.$apiUrl;
  },
  data() {
    return {
      content: ``,
      editorOption: {
        placeholder: "副文本框请输入内容...",
      },
      http:""
    };
  },
  watch:{
    content(){
      console.log(this.content)
      this.$emit("getContent",this.content)
    },
    rfuwenben(){
      this.content = this.rfuwenben;
    }
  },
  methods: {
    imgHandler(state) {
      if (state) {
        //触发input的单击 ，fileBtn换成自己的
        this.$refs.fileBtn.click();
      }
    },
    tishiWenben(){
      this.$message('右侧为预览效果 , 请在左侧文本框编辑内容,  编辑完成可点击底部按钮提交');
    },
    handleChange(e) {
      const files = Array.prototype.slice.call(e.target.files);
      let this_ = this;
      if (!files) {
        return;
      }
      let form = new FormData();
      form.append("file", files[0]);
      //由于我的接口是base64上传到服务器的，需要转成base64，否则直接将form文件上传即可
      let reader = new FileReader();
      reader.readAsDataURL(files[0]);
      reader.onload = (e) => {
        //将url改成自己的地址
        axios.post(this_.$apiUrl+"/api/common/fileupload", form)
          .then((res) => {
            console.log(res);
            //这里设置为空是为了联系上传同张图可以触发change事件
            this.$refs.fileBtn.value = "";
            if (res.status === 200) {
              let selection = this.$refs.text.quill.getSelection();
              //这里就是返回的图片地址，如果接口返回的不是可以访问的地址，要自己拼接
              // let imgUrl = this.http + res.data.data;
              let imgUrl = res.data.data;
              //获取quill的光标，插入图片
              this.$refs.text.quill.insertEmbed(
                selection != null ? selection.index : 0,
                "image",
                imgUrl
              );
              //插入完成后，光标往后移动一位
              this.$refs.text.quill.setSelection(selection.index + 1);
            }
          });
      };
    },

  },
};
</script>

<style lang="stylus">
.fuwenben {
  display: flex;
  justify-content: space-between;
  .cc_tishi{
    border-bottom 1px solid #999
    padding 2px 0 10px
    margin-bottom 10px
    color #2172ce
    font-size 18px
  }
  .ql_show {
    width: 100%;
  }

  .ql_show_box {
    border: 1px solid #999;
    border-radius: 6px;
  }

  .ql-editor {
    height: inherit;
  }
}
</style>
